<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<style>
    .textarea {
        width: 400px;
        height: 120px;
        margin: 0 auto;
    }
    
    table {
        border-collapse: collapse;
        margin: 0 auto;
        border: 1px solid black;
    }
    
    .savetime {
        width: 160px;
    }
    
    .saveevent {
        width: 200px;
    }
    
    td {
        text-align: center;
    }
    
    tr {
        border-bottom: 1px solid black;
    }
</style>

<body>
    <div id="app">
        <div class="textarea">
            <textarea v-model='noteText' cols="40" rows="5" placeholder="请输入需要记录的内容"></textarea>
            <button @click='save'>保存</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th class="saveevent">事件</th>
                    <th class="savetime">保存时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(item,index) in notes'>
                    <td>{{item.id}}</td>
                    <td>{{item.event}}</td>
                    <td>{{item.date}}</td>
                    <td><button @click='notes.splice(index, 1)'>删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    var nowTime = new Date(); //获取当前时间
    var N = new Vue({
        el: '#app',
        data: {
            noteText: '',
            notes: [{
                id: 1,
                event: '明早去餐厅',
                date: '2020/10/6 下午3:58:53'
            }, {
                id: 2,
                event: '明天下午去超市',
                date: '2020/10/6 下午3:59:43'
            }, {
                id: 3,
                event: '明天晚上去跑步',
                date: '2020/10/6 下午4:00:13'
            }],
            nextId: 4
        },
        methods: {
            save() {
                this.notes.push({
                    //id自增
                    id: this.nextId++,
                    //记录文本框内容
                    event: this.noteText,
                    //记录当前时间
                    date: nowTime.toLocaleString()
                })

                //保存后清空文本域
                this.noteText = ''
            }
        }
    })
</script>

</html>